<template>
  <el-card class="sales">
    <template #header>
      <div class="sales-header">
        <el-tabs v-model="activeName">
          <el-tab-pane name="sales" label="销售额" />
          <el-tab-pane name="visited" label="访问量" />
        </el-tabs>

        <div class="sales-date">
          <span @click="setToday">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            value-format="yyyy-MM-dd"
          />
        </div>
      </div>
    </template>

    <div>
      <el-row :gutter="20">
        <el-col class="sales-col" :xs="24" :md="18">
          <SalesChart />
        </el-col>

        <el-col :xs="24" :md="6">
          <div>
            <h3 class="sales-rank-title">门店销售额排名</h3>
            <div class="sales-rank-item">
              <div>
                <span class="sales-rank-index active">1</span><span>肯德基</span>
              </div>
              <div>123234</div>
            </div>

            <div class="sales-rank-item">
              <div>
                <span class="sales-rank-index active">2</span><span>肯德基</span>
              </div>
              <div>123234</div>
            </div>

            <div class="sales-rank-item">
              <div>
                <span class="sales-rank-index active">3</span><span>肯德基</span>
              </div>
              <div>123234</div>
            </div>

            <div class="sales-rank-item">
              <div>
                <span class="sales-rank-index">4</span><span>肯德基</span>
              </div>
              <div>123234</div>
            </div>

            <div class="sales-rank-item">
              <div>
                <span class="sales-rank-index">5</span><span>肯德基</span>
              </div>
              <div>123234</div>
            </div>

            <div class="sales-rank-item">
              <div>
                <span class="sales-rank-index">6</span><span>肯德基</span>
              </div>
              <div>123234</div>
            </div>

            <div class="sales-rank-item">
              <div>
                <span class="sales-rank-index">7</span><span>肯德基</span>
              </div>
              <div>123234</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import dayjs from 'dayjs'
import SalesChart from './components/SalesChart.vue'

export default {
  name: 'Sales',
  components: {
    SalesChart
  },
  data() {
    return {
      activeName: 'sales',
      date: ''
    }
  },
  methods: {
    setToday() {
      // dayjs() 获取当前的时间,format 格式化时间
      const today = dayjs().format('YYYY-MM-DD')
      this.date = [today, today]
    },
    setWeek() {
      // 如果是星期日，就算做上一周
      let today = dayjs()

      if (today.day() === 0) {
        // 是星期日, 减去一天
        today = today.subtract(1, 'day')
      }

      const start = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD')
      const end = dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD')

      this.date = [start, end]
    },
    setMonth() {
      const start = dayjs().startOf('month').format('YYYY-MM-DD')
      const end = dayjs().endOf('month').format('YYYY-MM-DD')

      this.date = [start, end]
    },
    setYear() {
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')

      this.date = [start, end]
    }
  }
}
</script>

<style lang="scss" scoped>
.sales {
  margin: 10px 0;
}
.sales-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sales-date {
  cursor: pointer;
  font-size: 14px;
  span {
    margin-right: 20px;
  }
}
.sales-col {
  height: 300px;
}
.sales-rank-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 400;
  color: #000;
}
.sales-rank-item {
  display: flex;
  justify-content: space-between;
}
.sales-rank-index {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin-right: 50px;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #000;
  margin-bottom: 20px;
  &.active{
    background-color: #000;
    color: #fff;
  }
}
</style>
